<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../css/common.css" />
	<style>
	#footer {
		height: 50px;
	}
	#footer .avatar {
		width: 30px;
	}
	.inputBox {
		position: relative;
	}
	.inputBox input {
		background: #F7F9F9;
		height: 32px;
		padding: 0 30px 0 10px;
		font-size: 14px;
	}
	.sendBtn {
		color: #FA7C82;
		font-size: 16px;
		padding: 0 15px;
	}
	.face {
		position: absolute;
		right: 4px;
		top: 0;
		width: 30px;
		height: 100%;
		background: url(../image/common/face.png) no-repeat center center;
		background-size: 20px;
	}
	</style>
</head>

<body>
<div id="app">
	<div class="aui-flex-col aui-flex-middle aui-border-t" id="footer">
		<div class="aui-px-10"><div class="avatar"><img :src="userInfo.user_avatar" alt=""></div></div>
		<div class="flex-auto inputBox">
			<input type="text" v-model="postData.content" placeholder="想勾搭,先评论" id="msgInput" tapmode onclick="focusInput();">
			<!-- <div class="face"></div> -->
		</div>
		<div class="sendBtn" tapmode onclick="send();">发送</div>
	</div>
</div>
</body>
<script type="text/javascript" src="../script/import.js"></script>
<script type="text/javascript" src="../script/dom7.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
var keyBoardMgr;
var winHeight;
var offsetTop = 0;		//把frm的offset值存起来，第二次弹出键盘 直接调用这个值，会快一点

var vm;
var vuedata = {
	isSave: false,
	event: 'eva',
	autoFocus: false,
	autoHide: false,
	postData: {
		userid: '',
		content: '',
		article_id: '',
		article_userid: '',
		//comment_id: '',
	},
	userInfo: {}
};
vm = new Vue({
	el: '#app',
	data: vuedata
});
apiready = function() {
	api.parseTapmode();
	
	winHeight = api.winHeight;

	vuedata.userInfo = getUserinfo();
	vuedata.postData.userid = getUserId();
	vuedata.postData.article_id = api.pageParam.article_id;
	vuedata.postData.article_userid = api.pageParam.article_userid;
	if(api.pageParam.comment_id){
		vuedata.postData.comment_id = api.pageParam.comment_id;
		vuedata.event = 'reply';
	}
	if(api.pageParam.autoFocus){
		vuedata.autoFocus = true;
	}
	if(api.pageParam.autoHide){
		vuedata.autoHide = true;
	}

	//键盘模块
	keyBoardMgr = api.require("keyBoardMgr");
	keyBoardMgr.addKBListener(function(ret, err){
		if(ret && ret.status == 1 && vuedata.autoFocus ){
			focusInput();
		}
	});
	
};

function onKeyBoardChanged(isShow,height){
	if(isShow  == 1){
		//弹出键盘
		if(offsetTop < 1){
			if(api.systemType == 'ios'){
				offsetTop = api.winHeight - 50 - height;
				api.setFrameAttr({
					name: 'chat_footer',
					rect: {
						y: offsetTop
					}
				});
			}else{
				//安卓延迟下
				setTimeout(function(){
					offsetTop = api.winHeight - 50;
					api.setFrameAttr({
						name: 'chat_footer',
						rect: {
							y: offsetTop
						}
					});
				},300);
			}
		}else{
			api.setFrameAttr({
				name: 'chat_footer',
				rect: {
					y: offsetTop
				}
			});
		}
	}else if(isShow  == 0){
		//隐藏键盘
		$$('#msgInput').blur();
		api.setFrameAttr({
			name: 'chat_footer',
			rect: {
				y: winHeight - 50
			}
		});
		if(vuedata.autoHide){
			api.closeFrame({
				name: 'chat_footer'
			});
		}
	}
}
//获取焦点
function focusInput(){
	$$('#msgInput').focus();
}

//发送
function send(){
	if( !vuedata.postData.content || vuedata.isSave ){
		return;
	}
	vuedata.isSave = true;
	api.ajax({
		url: BASE_URL + 'App/Article/articleComment',
		method: 'post',
		data: {
			values: vuedata.postData
		}
	},function(ret,err){
		if (ret && ret.code == 1) {
			if(vuedata.event == 'reply'){
				api.sendEvent({
					name: 'replySendEvent'
				});
			}else {
				api.sendEvent({
					name: 'evaSendEvent'
				});
			}
			
		}
		$$('#msgInput').blur();
		vuedata.postData.content = '';
		vuedata.isSave = false;
	});
}

</script>
</html>
